<template>
  <div class="app-container">
    <!-- 筛选条件 -->
    <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="70px" label-position="left">
      <el-form-item
        label="乙方渠道"
        prop="channelName"
      >
        <ChannelInput
          ref="ChannelInput"
          :channel-name="'C'"
          @selectChannel="selectChannel"
        />
      </el-form-item>
      <el-form-item label="时间日期" prop="endTime">
        <div class="r_flex">
          <el-date-picker
            v-model="queryParams.alltime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd"
            @change="changtime"
          />
        </div>
      </el-form-item>
    </el-form>

    <!-- 操作按钮 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh-left" size="mini" @click="getList">刷新</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-col>
      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />

    </el-row>

    <!-- 表格数据 -->
    <el-table
      v-if="refreshTable"
      v-loading="loading"
      stripe
      border
      :data="businessList"
      :default-expand-all="isExpandAll"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :header-cell-style="{background: $store.state.app.theme.tableBack,color: $store.state.app.theme.tableColor}"
      @cell-dblclick="celldblclick"
    >

      <el-table-column width="60px" label="id" align="center" prop="channelId" />
      <el-table-column label="渠道名称" align="center" prop="channelName" />
      <el-table-column label="订单提交率" align="center" prop="applyRate" >
        <template slot-scope="scope">
          {{scope.row.applyRate}}%
        </template>
      </el-table-column>
      <el-table-column label="URL进件成功率" align="center" prop="urlSuccessRate" >
        <template slot-scope="scope">
          {{scope.row.urlSuccessRate}}%
        </template>
      </el-table-column>
      <el-table-column label="触达率" align="center" prop="reachRate" >
        <template slot-scope="scope">
          {{scope.row.reachRate}}%
        </template>
      </el-table-column>
      <el-table-column label="展示url数" align="center" prop="urlNum" />
      <el-table-column label="进件成功数" align="center" prop="applySuccessNum" />
      <el-table-column label="进件失败数" align="center" prop="applyFailNum" />
      <el-table-column label="符合订单数" align="center" prop="matchedNum" />
      <el-table-column label="撞库数" align="center" prop="zkNum" />

      <!-- <el-table-column label="计费方式" align="center" prop="signType">
        <template slot-scope="scope">
          <div v-if="scope.row.signType == 1">uv</div>
          <div v-else-if="scope.row.signType == 2">cpa</div>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- 分页 -->
    <el-row :gutter="24" class="mb8" style="margin: 20px 0px">
      <el-col :span="24" style="display: flex; justify-content: flex-end; padding: 0px">
        <el-pagination
          background
          layout="prev, pager, next, sizes, total"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="queryParams.pageSize"
          :total="totalPage"
          @current-change="handlePageChange"
          @size-change="
            newSize => {
              queryParams.pageSize = newSize;
              getList();
            }
          "
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import { delChannel, getChannel, upChannel, addChannel, templateList } from '@/api/business/system'
import { channelTotal, deptTotal, channelBlcApiData } from '@/api/business/total'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import ChannelInput from "@/components/ChannelInput";

export default {
  name: 'indexTwo',
  components: { ChannelInput },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 修改渠道loading
      submitLoad: false,
      // 显示搜索条件
      showSearch: true,
      // 表格树数据
      businessList: [],
      // 对话框类型
      titleDialog: '',
      // 是否显示对话框
      openDialog: false,
      // 是否展开，默认全部展开
      isExpandAll: true,
      // 重新渲染表格状态
      refreshTable: true,
      // 查询参数
      queryParams: {
        pageNum: 1, // 当前页数
        pageSize: 10, // 分页大小
        jisuProductId: '',
        jisuProductName: '',
        alltime: [],
        startTime: '',
        endTime: ''
      },
      // 数据总条数
      totalPage: 0,
      // 表单参数
      formDialog: {
        bigProduct: '',
        h5TemplateId: 2,
        invitePage: '',
        name: '',
        productId: '',
        signType: '',
        status: 0,
        tcOpen: '',
        price: '',
        contact: '',
        contactPhone: ''
        // createBy: "",
        // createTime: "",
        // deduct: 0,
        // deductRateId: 0,
        // // id: "",
        // invite: "",
        // inviteUrl: "",
        // // ownerId: 0,
        // ownerName: "",
        // params: {},
        // searchValue: "",
        // updateBy: "",
      },
      sums: ['合计', '/', '/', '/', '/', '/', '/'],
      // h5模板数组
      H5Array: [],
      // 新增表单校验
      rules: {
        name: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        price: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        signType: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        ownerName: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        invitePage: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        tcOpen: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        inviteUrl: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        contact: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        contactPhone: [{ required: true, message: '该项不能为空', trigger: 'blur' }],
        h5TemplateId: [{ required: true, message: '该项不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    // 初始化时间
    this.$set(this.queryParams, 'alltime', [this.$store.state.app.theme.startTime, this.$store.state.app.theme.endTime])
    this.$set(this.queryParams, 'startTime', this.$store.state.app.theme.startTime)
    this.$set(this.queryParams, 'endTime', this.$store.state.app.theme.endTime)
    // 分页数据
    this.getList()
  },
  methods: {
    getSummaries(table) {
      return this.sums;
    },
    // 选择渠道
    selectChannel(data) {
      this.$set(this.queryParams, "channelId", data.id);
    },
    // 时间选择
    changtime(newtime) {
      this.queryParams.startTime = newtime ? newtime[0] : ''
      this.queryParams.endTime = newtime ? newtime[1] : ''
    },
    // 查询列表
    getList() {
      this.loading = true
      const param = JSON.parse(JSON.stringify(this.queryParams))
      // param.jisuProductId = Number(param.jisuProductId) || ''
      channelBlcApiData(param).then(response => {
        this.businessList = response.rows
        this.totalPage = response.total
        this.loading = false
      }).finally(() => {
        this.loading = false
      })
    },
    // 新增按钮操作
    handleAdd() {
      if (this.formDialog.id) {
        this.formDialog = this.$options.data().formDialog
      }
      this.openDialog = true
      this.titleDialog = 'add'
    },
    // 搜索按钮操作
    handleQuery() {
      this.getList()
    },
    // 重置按钮操作
    resetQuery() {
      this.queryParams = this.$options.data().queryParams
      // 初始化时间
      this.$set(this.queryParams, 'alltime', [this.$store.state.app.theme.startTime, this.$store.state.app.theme.endTime])
      this.$set(this.queryParams, 'startTime', this.$store.state.app.theme.startTime)
      this.$set(this.queryParams, 'endTime', this.$store.state.app.theme.endTime)
      this.handleQuery()
    },
    // 表单重置
    reset() {
      this.form = {
        parentId: '',
        deptName: '',
        pdAmount: '',
        tag: '',
        leader: '',
        type: '',
        url: '',
        zkStatus: '1'
      }
      this.resetForm('form')
    },
    // 分页请求
    handlePageChange(data) {
      this.queryParams.pageNum = data
      this.getList()
    },
    // 双击复制
    celldblclick(row, column, cell, event) {
      if (!column.property) return
      if (!row[column.property]) return
      const oInput = document.createElement('input')
      oInput.value = row[column.property]
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message.success({
        message: '复制成功',
        showClose: true
      })
      oInput.remove()
    }
  }
}
</script>
